<template>
  <div class="main">
    <div style="text-align: center;margin: 1rem 0;color: dodgerblue;">
      <h3>申请成为大师</h3>
    </div>
    <div class="head-item">
      <p>头像</p><img @click="changeAvatar" :src="getAvatar" alt=""></div>
    <customer-input limit="16" v-model="user.nickName" title="昵称"></customer-input>
    <customer-input limit="18" v-model="user.title" title="头衔"></customer-input>
    <customer-input limit="11" v-model="user.phone" title="手机号"></customer-input>
    <customer-input limit="100" v-model="user.description" title="简介"></customer-input>
    <div style="width: 100%;text-align: center;">
      <button @click="submit" class="submit">提交</button>
    </div>
     <customer-footer></customer-footer>
  </div>
 
</template>
<script>
    import CustomerInput from '../components/CustomerInput'

    export default {
        components: {
            CustomerInput
        },
        watch: {},
        created() {},
        data() {
            return {
                localId: "",
                defaultAvatar: "/fengshui/static/pic/icon/people.png",
                user: {
                    avatar: "",
                    nickName: '',
                    title: '',
                    description: '',
                    phone: ''
                }
            }
        },
        watch: {},
        computed: {
            getAvatar: function() {
                if (this.localId.length != 0) {
                    return this.localId;
                } else {
                    return this.defaultAvatar;
                }
            }
        },
        methods: {
            submit: function() {
                let user = this.user;

                for (let obj in user) {
                    //   console.log(obj)
                    if (user[obj] == undefined || user[obj].length == 0) {
                        this.$vux.alert.show({
                            title: '提示',
                            content: '请填写完整的信息!!'
                        })
                        return;
                    }
                }
                this.$vux.loading.show({
                    text: '上传资料中'
                })
                this.$http.get(this.url.acid + "&do=becomeProfessor", {
                    params: user
                }).then(response => {
                    this.$vux.loading.hide()
                    let resJson = response.body;
                    if (resJson.status == "success") {
                        this.$vux.loading.hide();
                        this.$vux.alert.show({
                                title: '提示',
                                content: "申请成功,请等待通过~"
                            })
                            // 通知服务器去下载图片
                        this.$http.get(this.url.acid + "&do=downloadwxmedia", {
                            params: {
                                type: 'avatar',
                                serverId: user.avatar
                            }
                        });
                    } else {
                        this.$vux.loading.hide();
                        this.$vux.alert.show({
                            title: '提示(添加失败)',
                            content: resJson.msg
                        })
                    }
                }, response => {
                    this.$vux.loading.hide();
                    this.$vux.alert.show({
                        title: '提示',
                        content: "连接服务器失败!!!"
                    })
                });
            },
            changeAvatar: function() {
                let self = this;
                self.wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function(localRes) {
                        self.wx.uploadImage({
                            localId: localRes.localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function(res) {
                                self.localId = localRes.localIds[0];
                                self.user.avatar = res.serverId;
                                // var serverId = res.serverId; // 返回图片的服务器端ID
                            }
                        });
                    }
                });
            }
        }

    }
</script>
<style>
    .weui-textarea {
        width: 80% !important;
        float: left;
    }
</style>

<style scoped>
    .head-item {
        overflow: hidden;
        width: 100%;
        margin-top: .6rem;
        padding: .6rem 1rem;
        background: white;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    
    .head-item p {
        line-height: 2rem;
        color: dodgerblue;
        font-size: .8rem;
        float: left;
    }
    
    .head-item img {
        width: 2rem;
        height: 2rem;
        float: right;
        margin-right: 1rem;
        border-radius: 1rem;
    }
    
    .submit {
        width: 80%;
        border-radius: 100px;
        border: none;
        padding: .4rem;
        color: white;
        background-color: dodgerblue;
        margin: 1rem auto;
    }
</style>